<template>
  <div style="position: relative;width: 100%; height: 98%" id="content">
    <Spin size="large" fix v-if="Loading"></Spin>
    <div class="left" ref="left">
      <vxe-table
              resizable
              show-overflow
              ref="xTree"
              height="auto"
              :tree-config="{children: 'children',isAllTreeExpand:true}"
              :row-config="{isHover: true}"
              :data="tableData"
              :cell-style="cellStyle">
        <vxe-table-column field="yjpz001" title="要件名称" tree-node/>
        <vxe-table-column title="操作" align="center" fixed="right" min-width="100">
          <template #default="{row}">
            <Upload action="" ref="uploads" :accept="acceptImg" multiple style="margin-top: 2%"
                    :before-upload="(file) => beforeUploads(file,'',row.ss02001Id)"
                    name="yjpz007">
              <Button type="success" v-if="(row.yjpz007==processStage || row.yjpz007=='18')&&!readOnly">上传要件</Button>
            </Upload>
            <Button v-if="row.yjpz007" style="margin-left: 10px" @click="cellClickEvent(row.ss02001Id)">
              查看要件
            </Button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
    <div class="right">
      <vxe-table
              resizable
              :row-config="{isHover: true}"
              height="auto"
              show-overflow
              ref="xTree2"
              :loading="detailLoading"
              :data="detailData">
        <vxe-table-column field="yjfm0001" title="文件名称" tree-node/>

        <vxe-table-column title="操作" align="center" fixed="right" min-width="100">
          <template #default="{row}">
            <Button type="success" @click="look(row)">查看</Button>
            <Button type="warning" style="margin-left: 10px" @click="upload(row)">下载</Button>
            <Button type="error" style="margin-left: 10px" @click="Delete(row)"
                    v-if="row.yjpz007==processStage&&!readOnly">删除
            </Button>
          </template>
        </vxe-table-column>
      </vxe-table>
    </div>
  </div>
</template>

<script>
  import {CommonMixin} from '@/views/common/js/CommonMixin'
  import {postAction} from '@/api/request'
  import DateFormat from "@/plugins/format";

  export default {
    name: "application10",
    mixins: [CommonMixin],
    components: {},
    props: {
      ss12001Id: {
        type: String,
        default: "",
      },
      type: {
        type: Number,
        default: 11
      },
      readOnly: {
        type: Boolean,
        default: false
      },
      processStage: {
        type: String,
        default: "01",
      },
      familyId: {
        type: String,
        required: true,
      }
    },
    data() {
      return {
        uploadFileData: {},
        url: {
          list: "/api/ac/subsistence/ss11010Service/findSs11010List",
          insert: "/api/ac/subsistence/ss11010Service/saveSs02005",
          detail: "/api/ac/subsistence/ss11010Service/detail",
          delete: "/api/ac/subsistence/ss11010Service/deleteSs02005",
        },
        Loading: false,
        uploadList: [],
        fileData: [],
        queryParam: {
          ss12001Id: this.ss12001Id,
          processStage: this.processStage,
          familyId: this.familyId,
          ssca0016: this.$parent.ssca0016
        },
        detailData: [],
        finishUpload: true,
        detailLoading: false
      }
    },

    methods: {
      look(row) {
        window.open(row.yjfm0002);
      },

      upload(row) {
        this.downloadImage(row.yjfm0002, row.yjfm0001);
      },

      beforeUploads(file, name, id) {
        this.Loading = true;
        let upload = {};
        upload.id = id;
        upload.name = name;
        upload.file = file;
        this.uploadList.push(upload)
        if (this.finishUpload) {
          this.finishUpload = false;
          setTimeout(() => {
            this.uploadImageFilesData();
          }, 50);
        }
        return false;
      },

      async uploadImageFilesData() {
        let uploadList = this.uploadList;
        for (let i in uploadList) {
          let size = uploadList[i].file.size;
          if (size > 1024 * 1024 * 10) {
            this.finishUpload = true;
            this.uploadList = [];
            this.$Message.error("文件大小不能大于10M");
            this.Loading = false;
            return false;
          }
        }
        let id = uploadList[0].id;
        for (let i in uploadList) {
          let uploadBase64 = await
                  this.file2Base64(uploadList[i].file);
          let index = uploadBase64.indexOf('base64,') + 7;
          uploadBase64 = uploadBase64.substring(index);
          let fileName = DateFormat(new Date(), 'YYYYMMDDhhmmss') + '.png';
          let filePath = 'subsistence/' + DateFormat(new Date(), 'YYYYMMDD') + '/';
          let timeStep = new Date().getTime().toString();
          let uploadFileData = {
            filePath: filePath,
            fileName: fileName,
            timestamp: timeStep,
            file: uploadBase64
          };
          let {data} = await postAction('/api/ac/subsistence/businessCommonService/upload', uploadFileData).then(res => {
            return res;
          });
          let insertParam = {
            ssbh0001: this.familyId,
            ssbh0002: id,
            yjfm0001: uploadList[i].file.name,
            yjfm0002: data.data,
          }
          await postAction(this.url.insert, insertParam).then(res => {
            return res;
          });
        }
        this.loadDetailData(id);
        this.finishUpload = true;
        this.uploadList = [];
        this.Loading = false;
      },

      loadDetailData(ss02001Id) {
        this.detailLoading = true;
        var param = new Object();
        param.ssbh0001 = this.familyId;
        param.ssbh0002 = ss02001Id;
        postAction(this.url.detail, param).then((res) => {
          if (res.data.errcode != 0) {
            this.$Message.error(res.data.errmsg);
          } else {
            this.detailData = res.data.data;
          }
        }).finally(() => {
          this.detailLoading = false;
        })
      },

      cellClickEvent(ss02001Id) {
        this.loadDetailData(ss02001Id);
      },

      Delete: function (row) {
        this.$Modal.confirm({
          title: '确定删除吗？',
          onOk: () => {
            var that = this;
            var id = row.id;
            postAction(that.url.delete, {id: id}).then((res) => {
              if (res.data.errcode == 0) {
                //重新计算分页问题
                this.loadDetailData(row.ssbh0002);
                that.$Message.success("删除成功！");
              } else {
                that.$Message.error(res.data.errmsg);
              }
            });
          }
        })
      },
      list() {
        let that = this;
        that.Loading = true;
        let param = Object.assign({}, this.queryParam);
        let url = this.url.list;
        postAction(url, param).then((res) => {
          if (res.data.errcode != 0) {
            this.$Message.error(res.data.errmsg);
          } else {
            that.tableData = res.data.data;
            let tableData = res.data.data
            for (let i in tableData) {
              let children = tableData[i].children;
              for (let j in children) {
                if (children[j].yjpz007 == this.processStage) {
                  this.$refs.xTree.toggleTreeExpand(that.tableData[i]);
                  break
                }
              }
            }
          }
        }).finally(() => {
          that.Loading = false;
        })
      },
      prevStep() {
        this.$emit('prevStep');
      },
      nextStep() {
        let that = this;
        that.Loading = true;
        let url = this.url.check;
        postAction(url, {processPhase: "01", ssbh0001: this.$parent.familyInfo.ss11301Id}).then((res) => {
          if (res.data.errcode != 0) {
            this.$Message.error(res.data.errmsg);
          } else {
            this.$emit('nextStep');
          }
        }).finally(() => {
          that.Loading = false;
        })
      },
      cellStyle({row, rowIndex, column}) {
        if (column.property == 'yjpz001' && row.yjpz006 == '1') {
          return {
            color: 'red'
          }
        }
      }
    },
    mounted() {
      if (this.type == 17) {
        this.url = {
          list: "/api/ac/subsistence/ss11010Service/findSs11010List",
          insert: "/api/ac/subsistence/ss17010Service/saveSs02005",
          detail: "/api/ac/subsistence/ss17010Service/detail",
          delete: "/api/ac/subsistence/ss17010Service/deleteSs02005",
        };
      } else if (this.type == 13) {
        this.url = {
          list: "/api/ac/subsistence/ss11310Service/list",
          insert: "/api/ac/subsistence/ss11310Service/insert",
          detail: "/api/ac/subsistence/ss11310Service/detail",
          delete: "/api/ac/subsistence/ss11310Service/delete",
        };
      } else if (this.type == 15) {
        this.url = {
          list: "/api/ac/subsistence/ss15010Service/findSs11010List",
          detail: "/api/ac/subsistence/ss15010Service/detail",
        };
      } else {
        this.url = {
          list: "/api/ac/subsistence/ss11010Service/findSs11010List",
          insert: "/api/ac/subsistence/ss11010Service/saveSs02005",
          detail: "/api/ac/subsistence/ss11010Service/detail",
          delete: "/api/ac/subsistence/ss11010Service/deleteSs02005",
        };
      }
      this.list();
    },
  }
</script>

<style scoped>
  /deep/ .ivu-upload {
    display: inline-block;
  }

  /deep/ th .vxe-cell {
    text-align: center;
  }

  col--tree-node.col-red {
    background-color: red;
    color: #fff;
  }

  .left {
    position: absolute;
    overflow-y: auto;
    width: 50%;
    top: 10px;
    left: 0px;
    height: 100%;
  }

  .right {
    position: absolute;
    overflow-y: auto;
    width: 50%;
    top: 10px;
    left: 50%;
    height: 100%;
  }


</style>
